/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */

async function setChannleList() {
  const res = await axios({
    url: "/v1_0/channels",
  });
  // console.log(res);
  const htmlStr =
    `<option value="" selected="">请选择文章频道</option>` +
    res.data.channels
      .map((item) => {
        return `
    <option value="${item.id}" >${item.name}</option>

    `;
      })
      .join("");
  document.querySelector(".form-select").innerHTML = htmlStr;
}
// 默认网页运筹调用一次
setChannleList();
/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
// 2.2 选择文件并保存在 FormData
document.querySelector(".img-file").addEventListener("change", async (e) => {
  const file = e.target.files[0];
  const fd = new FormData();
  fd.append("image", file);
  // 2.3 单独上传图片并得到图片 URL 网址
  const res = await axios({
    url: "/v1_0/upload",
    method: "post",
    data: fd,
  });
  console.log("上传图片返回的URL：", res.data.url);
  // 2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
  const imgUrl = res.data.url;
  document.querySelector(".rounded").src = imgUrl;
  document.querySelector(".rounded").classList.add("show");
  document.querySelector(".place").classList.add("hide");
});
// 优化点击img可以重新切换封面
document.querySelector(".rounded").addEventListener("click", () => {
  document.querySelector(".img-file").click();
});
/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
// 3.1 基于 form-serialize 插件收集表单数据对象
document.querySelector(".send").addEventListener("click", async (e) => {
  if (document.querySelector(".send").innerHTML !== "发布") {
    return;
  }
  const form = document.querySelector(".art-form");
  const data = serialize(form, { hash: true, empty: true });
  // 发布文章的时候，不需要id属性可以删除（id是为了后续做编辑使用）
  delete data.id;
  // 自己收集封面图片地址保存到data对象中

  data.cover = {
    type: 1, //封面类型
    images: [document.querySelector(".rounded").src], //封面图片url
  };
  console.log(data);
  console.log("提交文章时的图片URL：", data.cover.images[0]);

  try {
    // console.log(data);
    const res = await axios({
      url: "/v1_0/mp/articles",
      method: "post",
      data: data,
    });
    console.log(res);
    // 3.3 调用 Alert 警告框反馈结果给用户
    myAlert(true, "发布成功");
    // 3.4 重置表单并跳转到列表页
    form.reset();
    // 封面需要手动重置
    document.querySelector(".rounded").src = "";
    document.querySelector(".rounded").classList.remove("show");
    document.querySelector(".place").classList.remove("hide");
    // 富文本编辑器也要重置
    editor.setHtml("");
    // 成功后1s延迟跳转
    setTimeout(() => {
      location.href = "../content/index.html";
    }, 1000);
  } catch (err) {
    console.dir(err);
    myAlert(false, err.response.data.message);
  }
});

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
// 4.2 发布文章页面接收参数判断（共用同一套表单）
(function () {
  console.log(location.search);
  const paramsStr = location.search;
  const params = new URLSearchParams(paramsStr);
  params.forEach(async (value, key) => {
    // console.log(value, key);
    // 当前有要编辑的文章id被传过来
    // 4.3 修改标题和按钮文字
    if (key === "id") {
      document.querySelector(".title span").innerHTML = "修改文章";
      document.querySelector(".send").innerHTML = "修改";
      // 4.4 获取文章详情数据并回显表单
      const res = await axios({
        url: `/v1_0/mp/articles/${value}`,
      });
      // console.log(res);
      // 组织我仅仅需要的数据对象，为后续变量会先到页面上做铺垫
      const dataObj = {
        title: res.data.title,
        channel_id: res.data.channel_id,
        rounded: res.data.cover.images[0],
        content: res.data.content,
        id: res.data.id,
      };
      // console.log(dataObj);

      // 遍历数据对象属性，映射到页面元素上，快速赋值
      for (key in dataObj) {
        // 封面设置
        if (key === "rounded") {
          // 有封面
          if (dataObj[key]) {
            document.querySelector(".rounded").src = dataObj[key];
            document.querySelector(".rounded").classList.add("show");
            document.querySelector(".place").classList.add("hide");
          }
        } else if (key === "content") {
          // 富文本
          editor.setHtml(dataObj[key]);
        } else {
          // 用数据对象属性名，作为标签name属性选择器来找到对应标签把值赋予进去
          // console.log(key);

          document.querySelector(`[name=${key}]`).value = dataObj[key];
        }
      }
    }
  });
})();
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector(".send").addEventListener("click", async (e) => {
  // 5.1 判断按钮文字，区分业务（因为共用一套表单）
  if (e.target.innerHTML !== "修改") return;

  // 5.2 调用编辑文章接口，保存信息到服务器
  const form = document.querySelector(".art-form");
  const data = serialize(form, { hash: true, empty: true });
  // console.log(data);
  try {
    const res = await axios({
      url: `/v1_0/mp/articles/${data.id}`,
      method: "put",
      data: {
        ...data,
        cover: {
          type: document.querySelector(".rounded").src ? 1 : 0,
          images: [document.querySelector(".rounded").src],
        },
      },
    });
    // console.log(res);
    form.reset();
    myAlert(true, "修改文章成功");
  } catch (err) {
    myAlert(false, err.response.data.message);
  }
});
